<template>
	<view class="mask">
		<view class="mask__main">
			<view class="main__option">
				<view class="option__title" v-if="false">
					{{$t('pick.type')}} <text class="title__tips">（不支持信用卡出金）</text>
				</view>
				<view class="option__item">
					<text class="item__title item__first">{{$t('pick.type')}}</text>
					<view class="item__value">
						<input type="text" v-model="formData.cardType" :placeholder="$t('pick.type')" class="value__input" maxlength="20"/>
					</view>
				</view>
			</view>
			<view class="main__option">
				<view class="option__title">
					{{$t('pick.accountInfo')}} <text class="title__tips">（{{$t('bank.bindTips')}}）</text>
				</view>
				
				<view class="option__item">
					<text class="item__title">{{$t('bank.country')}}</text>
					<text class="item__star">*</text>
					<view class="item__value">
						<input type="text" v-model.trim="formData.bank_nation" :placeholder="$t('trade.country')" class="value__input" maxlength="20"/>
					</view>
				</view>
				
				
				<view class="option__item">
					<text class="item__title">{{$t('bank.accountAddress')}}</text>
					<view class="item__value">
						<input type="text" v-model.trim="account_address" :placeholder="$t('bank.accountAddress')" class="value__input" maxlength="20"/>
					</view>
				</view>
				
				<view class="option__item">
					<text class="item__title">{{$t('trade.bankName')}}</text>
					<text class="item__star">*</text>
					<view class="item__value">
						<input type="text" v-model.trim="formData.bank_name" :placeholder="$t('trade.bankName')" class="value__input" maxlength="30"/>
					</view>
				</view>
				
				<view class="option__item">
					<text class="item__title">{{$t('trade.sscode')}}</text>
					<view class="item__value">
						<input type="text" v-model.trim="bank_code" :placeholder="$t('trade.sscode')" class="value__input" maxlength="20"/>
					</view>
				</view>
				
				
				
				<view class="option__item">
					<text class="item__title">{{$t('trade.account')}}</text>
					<text class="item__star">*</text>
					<view class="item__value">
						<input type="text" v-model.trim="formData.shiming_name" :placeholder="$t('trade.account')" class="value__input" maxlength="30"/>
					</view>
				</view>
				<view class="option__item">
					<text class="item__title">{{$t('trade.cardNum')}}</text>
					<text class="item__star">*</text>
					<view class="item__value">
						<input type="text" v-model.trim="formData.bank_card" :placeholder="$t('trade.cardNum')" class="value__input" maxlength="30"/>
					</view>
				</view>
				
				<view class="option__item">
					<text class="item__title">{{$t('bank.address')}}</text>
					<text class="item__star">*</text>
					<view class="item__value">
						<input type="text" v-model.trim="formData.bank_address" :placeholder="$t('bank.address')" class="value__input" maxlength="20"/>
					</view>
				</view>
				
				
				<view class="option__btn">
					<text class="btn__text" @click="cancelClick">{{$t('bank.cancel')}}</text>
					<text class="btn__text" @click="addClick">{{$t('bank.add')}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import pickerCash from '@/components/trade/pickerCashTips.vue'
	export default{
		components:{
			pickerCash
		},
		data(){
			return {
				cardType:"", //账户类型
				bank_code: "", // code
				account_address: "", //账户地址
				formData:{
					bank_name: "", // 银行卡名称
					bank_card: "", //银行卡号码
					shiming_name:"", //账户名称
					bank_nation: "", //银行卡国家
					bank_address: "", //银行卡地址
				}
			}
		},
		props:{
			isShowBind:{
				type:Boolean,
				default:false
			}
		},
		methods:{
			// 取消操作
			cancelClick(){
				this.$emit("update:isShowBind", false)
			},
			// 添加点击
			async addClick(){
				let {bank_code, account_address,cardType, formData} = this
				let hasEmpty = false
				for(let key in formData){
					if(formData[key] === ""){
						hasEmpty = true
						break
					}
				}
				if(hasEmpty){
					uni.showToast({
						title:this.$t('bank.complete'),
						icon:"none"
					})
					return
				}
				uni.showLoading({
					title:this.$t('loading.loading'),
					mask:true
				})
				let params = {
					cardType,
					bank_code,
					account_address,
					...formData
				}
				let res = await this.$api.addBankCard(params)
				uni.hideLoading()
				if(res.code === 1 && res.data){
					let {formData} = this
					formData.id = res.data.id
					this.$emit("bindHandle", {...formData})
					this.cancelClick()
				}else{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mask{
		@include fixedFullScreen(999);
				background: rgba(#0E101F, 0.8);
		@include flexCenter();
		&__main{
			width: 710rpx;
			border-radius: 12rpx;
			background: #282c41;
			padding: 24rpx;
			box-sizing: border-box;
			.main__option{
				padding: 0 20rpx;
				margin-bottom:20rpx;
				box-sizing: border-box;
				background: #282c41;
				.option__title{
					@include flexRowAlign();
					padding-top: 20rpx;
					box-sizing: border-box;
					font-size: 36rpx;
					font-weight: 800;
					color: #fff;
					margin-bottom: 20rpx;
					&:before{
						content: "";
						margin-left: 10rpx;
						width: 6rpx;
						height: 30rpx;
						background: #458EF4;
						margin-right: 12rpx;
					}
					.title__tips{
						font-size: 28rpx;
						color: #999999;
						font-weight: normal
					}
				}
				.option__item{
					@include flexRowAlign();
					height:78rpx;
					// border-top:1rpx solid #EEEEEE;
					.item__title{
						font-size: 30rpx;
						color: #fff;
						width: 200rpx;
						text-align: justify;
						text-align-last: justify;
					}
					.item__first{
						// text-align:initial;
						// text-align-last: initial;
					}
					.item__star{
						font-size: 32rpx;
						color: #FF2B2B;
						margin-left: 4rpx;
					}
					.item__value{
						margin-left: 30rpx;
						.value__input{
							color: #fff;
							font-size: 30rpx;
						}
					}
				}
				.option__btn{
					@include flexRowAlign(space-between);
					margin-top: 60rpx ;
					padding-bottom: 80rpx;
					.btn__text{
						width: 280rpx;
						height: 98rpx;
						background: #458EF4;
						border-radius: 12rpx;
						font-size: 36rpx;
						font-weight: 800;
						color: white;
						@include flexCenter();
						&:first-child{
							background: #999999;
						}
					}
				}
			}
		}
	}
</style>